<script lang="ts" setup>
import {ref} from "vue";
import {useToast} from 'vue-toast-notification';
import 'vue-toast-notification/dist/theme-sugar.css';
const $toast = useToast();//消息提示栏
import axios from "axios";



const name = ref('')
const email = ref('')
const country = ref('')
const sex = ref('男士')
const sexOption = ['男士', '女士', '其他']
const password = ref('')
const qrcode = ref('')
const accept = ref(false)
const againPassword = ref('')
const age = ref(18)
const onSubmit = () => {
  if (accept.value === true) {

    const data = {
      "mail": email.value,
      "password": password.value,
      "roles": "user",
      "sex": sex.value == "男士" ? 1 : sex.value == "女士" ? 2 : 3,
      "age": age.value,
      "country": country.value,
      "name": name.value
    }
    // console.log(data)
    axios.post("/api/auth/register?code=" + qrcode.value, data)
        .then(res => {
          // console.log(res)
          if (res.data.success) {
            const msg = res.data.message
            localStorage.setItem("wiki-auth-token", msg)
            $toast.open({
              type: "success",
              position: "bottom",
              message: "注册成功"
            })
            setTimeout(()=>{
              window.location.href = "/"
            },300)
          } else {
            const msg = res.data.message
            $toast.open({
              type: "warning",
              position: "bottom",
              message: msg
            })
          }
        })

  } else {
    $toast.clear();
    $toast.open({
      message: '首先勾选隐私协议和用户协约',
      type: 'warning',
      position: 'bottom'
      // all of other options may go here
    });
  }
}
const onReset = () => {
  name.value = ""
  age.value = 18
  accept.value = false
  email.value = ""
  password.value = ""
  againPassword.value = ""
  sex.value = "男士"
  country.value = ""
  qrcode.value = ""
}

const sendQrcode = () => {
  if (email.value != "") {
    let val = email.value
    axios.get("/api/mail/auth?email=" + email.value)
        .then(res => {
          // console.log(res)
          const msg = res.data.message
          if (res.data.success) {
            $toast.clear();
            $toast.open({
              message: 'email验证码发送成功',
              type: 'success',
              position: 'bottom'
            });
          } else {
            if (res.data.status == 403) {
              $toast.clear();
              $toast.open({
                message: '请在' + msg[val] + "秒后重新发送",
                type: 'warning',
                position: 'bottom'
                // all of other options may go here
              });
            } else {
              $toast.clear();
              $toast.open({
                message: msg,
                type: 'warning',
                position: 'bottom'
                // all of other options may go here
              });
            }
          }

        })
  } else {
    $toast.clear();
    $toast.open({
      message: 'email 不能为空！',
      type: 'warning',
      position: 'bottom'
      // all of other options may go here
    });
  }

}

</script>

<template>
  <div class="register-info">
    <div class="text-h4" style="margin-top: 30px;margin-bottom: 3vh;text-align: center
">完成注册
    </div>
    <q-form
        class="q-gutter-md"
        style="width: 60vw;margin-left: 20vw;margin-right: 20vw;min-width: 400px"
        @reset="onReset"
        @submit="onSubmit"
    >
      <q-input
          v-model="name"
          :rules="[ val => val && val.length > 0 || '请输入你的名字']"
          filled
          hint="名字*"
          label="你的名字"
          lazy-rules
      />

      <q-input
          v-model="age"
          :rules="[
          val => val !== null && val !== '' || '请输入你的年龄',
          val => val > 0 && val < 120 || '请输入真实的年龄'
        ]"
          filled
          label="你的年龄*"
          lazy-rules
          type="number"
      />
      <q-input
          v-model="email"
          :rules="[
          val => val !== null && val !== '' || '请输入你的电子邮箱'
        ]"
          filled
          label="你的电子邮箱"
          lazy-rules
          type="email"
      >
        <template v-slot:append>
          <q-btn dense flat icon="add" label="发送验证码" @click="sendQrcode"/>
        </template>
      </q-input>
      <q-input
          v-model="qrcode"
          :rules="[
          val => val !== null && val !== '' || '请输入你的验证码'
        ]"
          filled
          label="你的电子邮箱验证码"
          lazy-rules
      />
      <q-select v-model="sex" :options="sexOption" label="性别"/>
      <q-input
          v-model="country"
          :rules="[
          val => val !== null && val !== '' || '请输入你的国家',
        ]"
          filled
          label="你的国家*"
          lazy-rules
      />
      <q-input
          v-model="password"
          :rules="[
          val => val !== null && val !== '' || '请输入你的你的密码',
          val => val.length >= 6 && val.length < 30 || '密码强度不够，请重新输入'
        ]"
          filled
          label="你的密码*"
          lazy-rules
          type="password"
      />
      <q-input
          v-model="againPassword"
          :rules="[
          val => val !== null && val !== '' || '请重复输入你的你的密码',
          val => val == password || '两次输入密码不对'
        ]"
          filled
          label="重复输入你的密码*"
          lazy-rules
          type="password"
      />

      <q-toggle v-model="accept" :rules="[ val => val == true || '你首先需要勾选用户协议']"
                label="我接受隐私条约和用户协议"/>

      <div>
        <q-btn color="primary" label="提交" type="submit"/>
        <q-btn class="q-ml-sm" color="primary" flat label="重置" type="reset"/>
      </div>
    </q-form>

  </div>
</template>

<style lang="scss" scoped>
.register-info {
  display: flex;
  flex-direction: column;
  width: 100vw;

}
</style>